<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="pragma" content="no-cache"  />
		<title>我要订仓</title>
		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=3ec5a840118dff92816396989a7159e0&v=1.2&services=true"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/settlement.css"/>
	</head>
	<body style="background: #f4f4f4;">
		<div class="wrapper">
			<div class="set-head">
				<div class="navigation fl">
					<select name="">
						<option value="0">广东省</option>
						<option value="1">山东省</option>
					</select>
					<select name="">
						<option value="0">广州市</option>
						<option value="1">佛山市</option>
					</select>
				</div>
				<a href="#" class="fr" id="contact">联系客服</a>
			</div>
			<div class="int-box">
				<div class="int-list">
					<a href="javascript:void(0);" class="clearfix">
						<div class="store-pic fl"><img src="https://img.thgo8.com/assets/users/10/08/584cc3451bb087fbe3a2247b869da15eebe37170.jpg" alt=""></div>
						<div class="store-msg fr">
							<div class="top-info clearfix">
								<div class="store-name fl">广州天河体育中心</div>
								<div class="place fr">距离 <span>18.5</span> KM</div>
							</div>
							<div class="button-wrap">
								<button class="chest-s">小柜</button>
								<button class="chest-m">中柜</button>
								<button class="chest-b">大柜</button>
								<button class="chest-l">特大</button>
							</div>
							<div class="price">￥<span>48</span>元 起/月</div>
							<div class="address">广州市天河区体育西路225号</div>
							<div class="maps-nav">
								<i><img src="images/lead.png" alt="" /></i>
								<span>路线指引</span>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="content">				
				<div class="select-wrap">
					<div class="lists">
						<label for="">选择城市</label>
						<select name="">
							<option value="1">广州</option>
							<option value="2">千灯湖</option>
						</select>
					</div>
					<div class="lists">
						<label for="">选择分店</label>
						<select name="">
							<option value="1"></option>
							<option value="2">千灯湖</option>
						</select>
					</div>
					<div class="lists">
						<label for="">收费标准</label>
						<div style="float: right;">￥<span>24.00</span>元起/小时</div>
					</div>
				</div>
				
				<div class="tips">预付3个月，可享受<span>95</span>折优惠哦！</div>
				<a class="apply-btn" href="barnDistributed.html">下一步</a>
				
				<div class="banner">
					<img src="https://img.thgo8.com/assets/images/07/04/0044860b9df2d3fdc85a62d5e1e2313fe6dfef4b.jpg" alt="" />
				</div>
			</div>
		</div>
		<!--网点导航-start-->
		<div class="mask none"></div>
			<div class="main-cont">
				<div class="head">
					<button class="cancel-btn">取消</button>
					<button class="cfm-btn">确认</button>
				</div>
				
				<div class="txt">
					<label for="">金刚迷你仓千灯湖网点</label>
					<div class="map" style="background: #ffffff;">
						<div class="show-right">
							<div id="map" style="width:100%;height:100%;"></div>
						</div>
					</div>
					
					<label for="">路线图</label>
					<div class="route-map">
						<img src="https://img.thgo8.com/assets/images/07/04/0044860b9df2d3fdc85a62d5e1e2313fe6dfef4b.jpg" alt="" />
					</div>
				</div>
			</div>
			<!--网点导航-end-->
		
		<script type="text/javascript">
			//查看地图指引
			$('.maps-nav').click(function(){
				$('.mask').show();
				$('.main-cont').addClass('go-top');
			})
			function maskHide(e){
				$(e).click(function(){
					$('.mask').hide();
					$('.main-cont').removeClass('go-top');
				})
			}
			maskHide('.cancel-btn');
			maskHide('.cfm-btn');
			
			var map = new BMap.Map("map");
				map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
				var local = new BMap.LocalSearch(map, {
					renderOptions: { map: map }
				});
				
				map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
				map.enableKeyboard(); // 开启键盘控制
				map.enableContinuousZoom(); // 开启连续缩放效果
				map.enableInertialDragging(); // 开启惯性拖拽效果
				map.addControl(new BMap.NavigationControl()); //添加标准地图控件(左上角的放大缩小左右拖拽控件)
				map.addControl(new BMap.ScaleControl()); //添加比例尺控件(左下角显示的比例尺控件)
				map.addControl(new BMap.OverviewMapControl()); // 缩略图控件
				// map.addControl(new BMap.MapTypeControl());
				
				var content = '';
				var searchInfoWindow = null;
	//			searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
	//				title: "广东省佛山市南海区桂城桂澜路亿能国际广场6层", //标题
	//				width: 0, //宽度
	//				height: 0, //高度
	//				panel: "panel", //检索结果面板
	//				enableAutoPan: true, //自动平移
	//				searchTypes: []
	//			});
				
				var myGeo = new BMap.Geocoder();
				// 将地址解析结果显示在地图上,并调整地图视野
				myGeo.getPoint("广东省佛山市南海区桂城桂澜路亿能国际广场6层", function(point) {
					if(point) {
						map.centerAndZoom(point, 30);
						marker = new BMap.Marker(point)
						marker.addEventListener("click", function(e) {
							searchInfoWindow.open(marker);
						})
						map.addOverlay(marker);
						searchInfoWindow.open(marker); //在marker上打开检索信息串口
					}
				});
			
			
			//页面加载时调用
			$(function(){
			    autoHeight();
			    orient();
//			    alert($(window).height());
			}); 
			//用户变化屏幕方向时调用
			$(window).bind( 'orientationchange', function(e){
			    autoHeight();
			    orient();
			    window.location.reload();
			});  
			
			function autoHeight(){
				if($(window).height() < 1168 && window.orientation == 0 || window.orientation == 180){
					$('.map').css('height',($(window).height()*.3)+'px');
				}
				if($(window).height() < 1000 && window.orientation == 0 || window.orientation == 180){
					$('.content .select-wrap .lists').css('height','80px');
					$('.map').css('height',($(window).height()*.28)+'px');
				}
			}
			function orient() {
				if (window.orientation == 90 || window.orientation == -90) {
				    $('body').css('min-height','1200px');
				    $('.map').css('height','436px');
				}else if (window.orientation == 0 || window.orientation == 180) {
				    $('body').css('min-height','auto');
				}
			}
		</script>
	</body>
</html>
